import { copyText, isMobile } from "esy-tools"
import { CopyOutlined, isArray, Message, Toast } from "esy-ui"
import React from "react"
import { useTranslation } from "react-i18next"
import { useNavigate } from "react-router-dom"

interface pArrProps {
    text?: string
    texts?: pArrProps[]
    link?: string
    code?: boolean
}

interface ListItemProps {
    title?: string
    texts: pArrProps[]
}

interface DocModalProps {
    list: ListItemProps[]
}

export const DocModal = (props: DocModalProps) => {
    const { list } = props
    const navigate = useNavigate()
    const { t } = useTranslation()

    const toLink = (e) => {
        const dataPath = e.target.getAttribute("data-path")
        if (dataPath) {
            navigate(dataPath)
        }
    }

    const onCopy = (txt: string) => {
        if (!txt) return
        copyText(txt)
            .then(() => {
                if (isMobile()) {
                    Toast.show({ content: t("copySuccess"), type: "success" })
                } else {
                    Message.show({ content: t("copySuccess"), type: "success" })
                }
            })
            .catch(() => {
                if (isMobile()) {
                    Toast.show({ content: t("copyFailed"), type: "error" })
                } else {
                    Message.show({ content: t("copyFailed"), type: "error" })
                }
            })
    }

    if (isArray(list)) {
        return (
            <div>
                {list.map((it, i) => (
                    <React.Fragment key={it.title || i}>
                        {it.title ? <div className="text-xl my-6 text-text-1">{t(it.title)}</div> : null}
                        {isArray(it.texts)
                            ? it.texts.map((item, idx) => {
                                  if (item.texts && isArray(item.texts)) {
                                      return (
                                          <p className="my-4 text-sm text-text-1" key={idx}>
                                              {item.texts.map((its, j) => {
                                                  if (its.link) {
                                                      return (
                                                          <a key={`a-${j}`} className="text-primary mx-1 underline cursor-pointer" data-path={its.link} onClick={toLink}>
                                                              {t(its.text as string)}
                                                          </a>
                                                      )
                                                  }
                                                  return <span key={`span-${j}`}>{t(its.text as string)}</span>
                                              })}
                                          </p>
                                      )
                                  }
                                  if (item.code) {
                                      return (
                                          <pre key={`code-${idx}`}>
                                              <code className="bg-text-3 py-2 px-3 flex items-center justify-between text-text-1 rounded-sm text-sm">
                                                  {t(item.text as string)}
                                                  <CopyOutlined className="text-sm text-text-1 cursor-pointer" onClick={() => onCopy(t(item.text as string))} />
                                              </code>
                                          </pre>
                                      )
                                  }
                                  return (
                                      <p className="my-4 text-sm text-text-1" key={item.text || idx}>
                                          {t(item.text as string)}
                                      </p>
                                  )
                              })
                            : null}
                    </React.Fragment>
                ))}
            </div>
        )
    }

    return null
}
